<template>
  <div class="bangdan">
    <h3>{{ title }}</h3>
    <ul class="text" v-for="(item, index) in myArr" :key="index">
      <li @click="changeId(item)">
        <img :src="item.coverImgUrl" alt="" width="40" />
        <div>
          <p>{{ item.name }}</p>
          <span class="time">{{ item.updateFrequency }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from "vuex"
export default {
  props: ["myArr", "num", "title"],
  data() {
    return {

    }
  },
  methods: {
    ...mapMutations(["changeId"])

  }

}
</script>
 
<style lang = "less" scoped>
.bangdan {
  h3 {
    padding: 12px 10px 0 15px;
    margin: 20px 0;
    font-size: 14px;
    color: #000;
    font-family: simsun, \5b8b\4f53;
  }
  ul {
    display: block;
    li {
      display: flex;
      padding: 10px 0 10px 13px;
      img {
        display: block;
        margin-right: 10px;
      }
      div {
        p {
          font-size: 12px;
          color: #000;
        }
        .time {
          display: block;
          margin-top: 8px;
          font-size: 12px;
          color: #999999;
        }
      }
      &:hover {
        background-color: rgba(248, 245, 245, 0.8);
      }
    }
  }
}
</style>